import { ElMessage, UploadFile, type UploadUserFile } from "element-plus";

export default defineComponent({
  name: "KkUploadeComponent",
  props: {
    // 默认文件数据
    defaultFileList: {
      type: Array,
      default: () => [],
    },
    // 上传地址
    uploadUrl: {
      type: String,
      default: "/uploadFile",
    },
    // 附加参数
    appendFilePath: {
      type: String,
      default: "",
    },
    // 是否可拖
    dragFlag: {
      type: Boolean,
      default: false,
    },
    // 多文件上传
    multipleType: {
      type: Boolean,
      default: true,
    },
    // 限制上传条数
    limit: {
      type: Number,
      default: 5,
    },
    listType: {
      type: String,
      default: "picture-card",
    },
    acceptType: {
      type: String,
      default: ".jpg,.png,.jpeg",
    },
    acceptTypeText: {
      type: String,
      default: "请上传.jpg,.png,.jpeg等图片文件",
    },
    autoUpload: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["pushEnd"],
  setup(props, { expose, emit }) {
    const headers: any = ref({ jsonType: "jsonType" }),
      appendData = ref({
        type: props.appendFilePath,
      }),
      fileList: any = ref([]),
      actionUrl = ref(import.meta.env.VITE_BASE_URL);

    // 超出最多张数
    const exceedHandler = (files: File[], uploadFiles: any) => {
      ElMessage.warning(`最多只能上传${props.limit}个文件`);
    };
    // 移除成功
    const removeHandler = (file: UploadFile, fileList: any) => {
      fileList.value = fileList;
      emit("pushEnd", fileList);
    };
    // 上传成功
    const successHandler = (res: any, file: any, fileList: any) => {
      fileList.value = fileList;
      emit("pushEnd", fileList);
    };
    return () => (
      <el-upload
        file-list={fileList}
        list-type="picture-card"
        action={actionUrl.value + props.uploadUrl}
        headers={headers}
        data={appendData}
        multiple
        limit={3}
        onExceed={exceedHandler}
        onSuccess={successHandler}
        onRemove={removeHandler}
      >
        <el-icon>
          <plus />
        </el-icon>
      </el-upload>
    );
  },
});
